<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('角色选择')" />
    <style type="text/css">
    .layui-col-md2{max-width:220px}
    .layui-form-item {margin-bottom: 0px;}
    .layui-form-label {width: 92px;margin-left: -10px;margin-right: -10px;}
    .layui-input-block{margin-left:100px;}
    .layui-input{max-width: 138px;}
    </style>
</head>
<body>
<form>
     <div class="layui-form-item">
     	<div class="layui-inline">
          <label class="layui-form-label">角色名称：</label>
          <div class="layui-input-block">
              <input type="text" name="roleName" id="roleName" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
          </div>
      </div>
         <div class="layui-inline" style="margin-right: 40px;">
             <a class="layui-btn layuiadmin-btn-order dhicon dh-search" id="btn-search"><span class="fa_span">查询</span></a>
             <button type="reset" class="layui-btn layui-btn-primary dhicon dh-refresh" id="dh-resets"><span class="fa_span">重置</span></button>
         </div>
     </div>
</form>
<div style="padding: 0 10px;">
	<div class="layui-inline layui-col-md12">
		<div th:style="${pagetype == 'checkbox'}?'float:left;width:45%':'float:left;width:100%'"><table class="layui-hide" id="dhtable" lay-filter="ftable"></table></div>
		<div class="layui-btn-container" style="width: 50px;text-align: center;margin-top:20%;float:left;" th:if="${pagetype == 'checkbox'}">
	        <div class="layui-btn addbtn layui-btn-disabled" style="padding:0 10px;margin-right: 0;">
	            <p class="layui-icon layui-icon-next" style="font-size:14px;margin:0;color:#C9C9C9"></p>
	        </div>
	        <div class="layui-btn delbtn layui-btn-disabled" style="padding:0 10px;margin-right: 0;">
	            <p class="layui-icon layui-icon-prev" style="font-size:14px;margin:0;color:#C9C9C9"></p>
	        </div>
		</div>
		<div style="float:left;width:45%"><table class="layui-hide" id="dhtable2" lay-filter="ftable2" th:if="${pagetype == 'checkbox'}"></table></div>
	</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "system/role/";
	var pagetype = [[${pagetype}]];
	/*]]>*/
</script>
<script type="text/javascript">
if(pagetype=="checkbox")var typeobj = {type: 'checkbox'};
else var typeobj = {type: 'radio'};
var $,layer,table,form,laydate,wherestr={},dataStr=[];
layui.use(['table','layer','jquery','form','laydate'], function () {
	$ = layui.$,layer = layui.layer,table = layui.table,form = layui.form,laydate=layui.laydate;
    $.tablelist.init({
        elem: '#dhtable'
        ,url: prefix+"/list"
		,where: {
	    	field: 'roleOrder' //排序字段
	    	,order: 'asc' //排序方式
	    }
		,sort:true
		,cols: [[
			{type:'numbers', fixed: 'left'},
			typeobj,
		    {field: 'roleName',title: '角色名称', sort: true},
		    {field: 'guid',title: 'guid',hide:true},
		]
		]
        ,height:'full-50'
    });
    if(pagetype=="checkbox"){
    	rend();
		//点击table行选中复选框
		$(document).on("click",".layui-table-body table.layui-table tbody tr",function(){
	        var obj = event ? event.target : event.srcElement;
	        var tag = obj.tagName;
	        var checkbox = $(this).find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
	        if(checkbox.length!=0)if(tag == 'DIV')checkbox.click();
	    });
		//点击复选框阻止冒泡
	    $(document).on("click",".layui-form-checkbox",function(e){
	        e.stopPropagation();
	        var data = [], data2 = [];
	        var checkStatus = table.checkStatus('dhtable');
	           data = checkStatus.data;
	        if(data.length > 0){$(".addbtn").removeClass("layui-btn-disabled");$(".addbtn").children().css('color','#fff');}else{$(".addbtn").addClass("layui-btn-disabled");$(".addbtn").children().css('color','#C9C9C9');}
	        var checkStatus2 = table.checkStatus('dhtable2');
	           data2 = checkStatus2.data;
	        if(data2.length > 0){$(".delbtn").removeClass("layui-btn-disabled");$(".delbtn").children().css('color','#fff');}else{$(".delbtn").addClass("layui-btn-disabled");$(".delbtn").children().css('color','#C9C9C9');}
	    });
	    $('.addbtn').click(function(){
	    	var checkStatus = table.checkStatus('dhtable'),data = [];
	           data = checkStatus.data;
	       	$.each(data,function(i,v){
	       		var flag = false;
	       		for(var j=0; j < dataStr.length; j++){
	    			if(v.guid == dataStr[j].guid)flag = true;			
	    		}
	       		if(!flag)dataStr.push({'guid':v.guid,'roleName':v.roleName});//排除已选中
	       	});
	       	rend();
	       	$('div.laytable-cell-checkbox').find('div.layui-form-checked').click();
	       	$(".addbtn").addClass("layui-btn-disabled");$(".addbtn").children().css('color','#C9C9C9');
	    })
	    $('.delbtn').click(function(){
	    	var checkStatus = table.checkStatus('dhtable2'),data = [];
	        data = checkStatus.data;
	    	$.each(data,function(i,v){
	    		for(var j=0; j < dataStr.length; j++){
	    			if(v.guid == dataStr[j].guid)dataStr.splice(j,1);
	    		}
	    	});
	    	rend();
	    	$(".delbtn").addClass("layui-btn-disabled");$(".delbtn").children().css('color','#C9C9C9');
	    })
	}else{
		table.on('row(ftable)', function(obj){
        	obj.tr.find('input[lay-type="layTableRadio"]').prop("checked",true);
            var index = obj.tr.data('index')
            var thisData = table.cache.dhtable;	//dhtable 表名
            //重置数据单选属性
            layui.each(thisData, function(i, item){
           		if(index === i){
                    item.LAY_CHECKED = true;
            	} else {
                	delete item.LAY_CHECKED;
            	}
            });
            form.render('radio');
        });
	}
 	//搜索按钮
 	$('#btn-search').on('click', function () {
        table.reload('dhtable', {page: {curr: 1},where:{roleName:$("#roleName").val()}});
     });
});
var callbackdata = function () {
	if(pagetype=="checkbox"){
		if(dataStr==[])return "none";
		else return dataStr;
	}else{
		if(!!table.checkStatus('dhtable').data[0])return table.checkStatus('dhtable').data[0];
		else return "none";
	}
}
//渲染表格
function rend(){
    $.tablelist.init({
        elem: '#dhtable2'
        ,cols: [[
			{type:'numbers', fixed: 'left'},
			typeobj,
		    {field: 'roleName',title: '角色名称', sort: true},
		    {field: 'guid',title: 'guid',hide:true},
        ]
        ]
    	,data:dataStr
        ,height:'full-50'
    });
}
</script>
</body>
</html>